import { useEffect, useState } from 'react'
import Hoc_login from "@/utils/Hoc_login"
import { Button, Input, Select, Space, Pagination, message, Switch } from 'antd'
import { getLive, delLive, searchLive, getLiveZhibo } from '@/api';
import { useNavigate } from 'react-router-dom';


function Index() {
  // 实例化
  const navigate = useNavigate()
  // 页码
  const [currentPage, setCurrentPage] = useState(1)
  // 直播数据
  const [live, setLive] = useState<any>("")
  // 总条数
  const [length, setlength] = useState()
  // 搜索框数据
  const [searhData, setSearchData] = useState("")

  useEffect(() => {
    (
      async (data) => {
        let res = await getLive(data)
        // console.log("**********直播数据", res)
        setLive(res.data.data)
        setlength(res.data.total)
      }
    )()
  }, [])

  // 搜索🔍
  const search = async () => {
    const res = await searchLive({ IdName: searhData })
    if (res.data.code === 200) {
      setLive(res.data.data)
    } else {
      setLive(res.data.data)
    }

  }
  const inpVal = (e: any) => {
    // console.log(e.target.value)
    setSearchData(e.target.value)
  }

  // 选择直播状态
  const handleChange = (value: string) => {
    if (value == "全部直播") {
      all()
    } else if (value == "直播中") {
      open()
    } else {
      end()
    }
  };

  //全部直播
  const all = async () => {
    let res = await getLiveZhibo({ status: 2 })
    setLive(res.data.data)
  }

  // 直播中
  const open = async () => {
    let res = await getLiveZhibo({ status: 1 })
    setLive(res.data.data)
  }

  // 已结束
  const end = async () => {
    let res = await getLiveZhibo({ status: 0 })
    setLive(res.data.data)
  }

  // 页码切换
  const pageChange = async (currentPage: any) => {
    let res = await getLive(currentPage)
    // console.log(res, "--------------")
    setLive(res.data.data)
    setCurrentPage(currentPage)
  }

  // 进入直播页面
  const goLive = (obj: any) => {
    // 状态为1时，进入直播，否则进入回看页面
    if (obj.status == 1) {
      navigate('/live', { state: obj })
    } else {
      navigate('/lookback')
    }
  }
  // 删除数据
  const delData = async (obj: any) => {
    // 状态为已结束，才触发删除按钮
    if (obj.status == 0) {
      if (confirm("确认删除吗？")) {
        let res = await delLive(obj.id)
        message.success(res.data.message)
        let res2 = await getLive(currentPage)
        // console.log(res2)
        setLive(res2.data.data)
      } else {
        message.warning('取消删除')
      }
    }
  }

  return (
    <div>
      <p>直播管理</p>

      <div>
        <Space wrap size={20}>
          直播状态:
          <Select
            defaultValue="请选择"
            style={{ width: 200 }}
            onChange={handleChange}
            options={[
              { value: '全部直播', label: '全部直播' },
              { value: '直播中', label: '直播中' },
              { value: '已结束', label: '已结束' },
            ]}
          />
          经纪人搜索:
          <Input placeholder='姓名、ID' onChange={inpVal} />
        </Space>
        <Button onClick={search}>🔍</Button>
      </div>

      <div className='zhibo'>
        <Space>
          <Button onClick={all}>全部直播</Button>
          <Button onClick={open}>直播中</Button>
          <Button onClick={end}>已结束</Button>
        </Space>

        <div className='zhiboList'>
          {
            live.length && live ? live.map((item: any, index: number) => {
              return (
                <div key={index} className='listData'>
                  <img src={item.img} alt="" style={{ width: '10.8rem', height: '4rem' }} />
                  <div>{item.title}</div>
                  <div className='list_2'>
                    <span>{item.name}</span>
                    <span>{item.create_time}</span>
                  </div>
                  <div className='list_3'>
                    <span onClick={() => goLive(item)}>{item.status == 1 ? '进入直播' : '回看'}</span>
                    <span onClick={() => delData(item)}>{item.status == 1 ? <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked /> : '删除'}</span>
                  </div>
                  <div className='status_list'>{item.status == 1 ? <span className='start'>直播中</span> : <span className='end'>已结束</span>}</div>
                </div>
              )
            }) : "暂无数据"
          }
        </div>

        {/* 分页 */}
        <Pagination defaultCurrent={1} total={length} onChange={pageChange} />
      </div>
    </div>
  )
}

export default Hoc_login(Index)
